<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用学习帮APP</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #f4f4f4;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        
        section{/*
            border: 1px solid rgb(0, 255, 68);*/
            flex: 1;
            
            overflow: scroll;
        }
        header .right{
            border-radius: .0725rem;
            width: 1.8116rem;
            height: .7246rem;
            position: absolute;
            bottom: .1691rem;
            right: .4831rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;/*
            background: #2493f1;*/
            font-size: .3382rem;
            letter-spacing: .0242rem;
            font-weight: 600;/*
            color: #4ACA6D;*/
            color: #2493f1;
        }
    </style>
    <link rel="stylesheet" href="../../../../css/header.css">
    <link rel="stylesheet" href="../../../../css/alert.css">
    <link rel="stylesheet" href="./css/section.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" />
    
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <script src="../../../../lib/jquery.min.js"></script>
    <script src="../../../../lib/vue.js"></script>
    <script src="../../../../lib/axios.js"></script>
</head>
<body>
    <div id="allmap" style="display: none;"></div>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">提问</span>
        <div class="right" onclick="upload()">发布问题</div>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
        function upload() {
            v.upload()
        }
    </script>
    <section>
        <div class="container">
            <!-- 问题 -->
            <van-cell-group class="">
                <van-field class="Q_title" type="textarea" v-model="Q_title" placeholder="请输入问题" rows="2" autosize maxlength="50" show-word-limit/>
            </van-cell-group>
            <!-- 问题描述 -->
            <van-cell-group>
                <van-field type="textarea" v-model="Q_detail" placeholder="+添加问题描述" rows="2" autosize maxlength="1000" show-word-limit />
            </van-cell-group>

            <!-- 照片上传 -->
              <template>
                <van-uploader v-show="addPic" v-model="fileList" multiple :max-count="9" title="标题内容" description="(标题说明)" tip="文字提示文字提示文字提示文字提示" :after-read="afterRead" :before-read="beforeRead" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp" :max-size=996147 @oversize="overSize" />
              </template>
            
            
    
    
            <div class="other">
                <!-- 图像选择 -->
                <button class="pic" @click="addImg()">
                    <div class="picIcon"></div>
                </button>
                <!-- 定位按钮 -->
                <button class="dw" @click="getPosition()">
                    <div class="dwIcon"></div>
                    <span v-if="address === ''"></span>
                    <span v-if="address !== ''" style="margin-left: .0966rem;">{{address}}</span>
                    <span class="close" v-if="address !== ''" @click.stop="closePosition()"></span>
                </button>
                <!-- 附近地名 -->
                <ul class="otherResult" v-if="address !== ''">
                    <li style="color: #252525; font-weight: 550;">附近</li>
                    <li v-for="item in otherResult" @click="changePosition(item.title)">{{item.title}}</li>
                </ul>
            </div>
            <div class="topic">
                <button class="topicBtn" @click.stop="getTopic()">
                    <span>{{topicList | handleTopic}}</span>
                    <span class="close" v-if="topicList.length !== 0" @click.stop="closeTopic()">清除</span>
                </button>
                <div class="topics">
                    <ul class="totalTopic">
                        <li class="topicInfo" v-for="(item, index) in totalTopicList" :tid="item.tId" @click="selectTopic(item.tId)">
                            {{item.tName}}
                        </li>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
    <style>
        .van-cell-group:nth-child(1){
            border-bottom: 0.5px solid #c0c0c075;
        }
        .Q_title .van-field__control{/**/
            min-height: .5314rem !important;
            font-size: .4831rem !important;
            font-weight: 550;
        }
    </style>
    
    




    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
    <script>
        Vue.filter('handleTopic', (topicList)=>{
            //return topicList
            let topicListStr = ""
            if(topicList.length === 0){
                return '#话题'
            }
            topicList.forEach((item, index, array)=>{
                topicListStr += `#${item.tName}`
            })
            return topicListStr
        })
        let v = new Vue({
            el: "section",
            data: {
                Q_title: "",
                Q_detail: "",
                addPic: false,
                fileList: [
                ],
                address: "",
                otherResult: [],
                topicList: [],
                totalTopicList: [],
                ready: true,
                currentRate: 50
            },
            methods: {
                //长传前校验
                // 返回布尔值
                beforeRead(file) {
                    let type = file.type
                    if (type !== 'image/jpeg' && type !== 'image/gif' && type !== 'image/png' && type !== 'image/apng' && type !== 'image/avif' && type !== 'image/svg+xml' && type !== 'image/webp') {
                        this.$toast('请上传一张图片文件！');
                        return false;
                    }
                    return true;
                    
                },
                afterRead(files, detail) {
                    if (typeof files === 'object' && files instanceof Array) {
                        console.log(files.length+'个文件')
                        files.forEach((file) => {
                            let type = file.type
                            if (type !== 'image/jpeg' && type !== 'image/gif' && type !== 'image/png' && type !== 'image/apng' && type !== 'image/avif' && type !== 'image/svg+xml' && type !== 'image/webp') {
                                this.ready = false
                            } else {
                                this.ready = true
                            }
                        })
                        
                    }else if (typeof files === 'object') {
                        console.log('1个文件', files)
                        let type = files.file.type
                        if (type !== 'image/jpeg' && type !== 'image/gif' && type !== 'image/png' && type !== 'image/apng' && type !== 'image/avif' && type !== 'image/svg+xml' && type !== 'image/webp') {
                            this.ready = false
                        }else{
                            this.ready = true
                        }
                        
                    }
                },
                  overSize () {
                    this.$toast('单个文件不能超过1MB')
                },
                upload(){
                    if (/^\s*$/.test(this.Q_title)) {
                        this.$toast.fail('请输入问题！');
                        return 0
                    }

                    this.$toast.setDefaultOptions({ duration: 120000 });
                    toast1 = this.$toast.loading({
                        message: '上传中(0%)',
                        forbidClick: true
                    });
                    if (this.ready) {
                        console.log('图片数量：'+this.fileList.length+", 内容："+ this.Q_title)
                        let userInfo = localStorage.getItem('XGB-user')
                        let userid = JSON.parse(userInfo).id
                        //let body = encodeURIComponent(this.Q_title)
                        let url = `https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getArticleList1.0/uploadArticle56A7eg618EG4186Eg186`
                        let data = { 
                            userid: userid, 
                            type: 'body',
                            Q_title: this.Q_title,
                            Q_detail: this.Q_detail,
                            //body: body,
                            address: this.address,
                            topicList: this.topicList,
                            n: this.fileList.length,  
                        }; 
                        fetch(url, {
                            method: 'POST', // 指定请求方法为POST  
                            headers: {  
                                'Content-Type': 'application/json', // 设置请求头Content-Type为application/json  
                            },  
                            body: JSON.stringify(data), // 将数据转换为JSON格式并作为请求体发送  
                        })
                        .then(res=>res.json())
                        .then(res=>{
                            
                            if (res.code === 0) {
                                if (res.data.finished === 'no') {
                                    
                                    let rate = Number(100*(res.data.nextIndex+1)/(this.fileList.length+1)) + Number((Math.random()*10).toFixed(2)) 
                                    toast1.message = `上传中(${rate.toFixed(2)}%)`
                                    let index = res.data.nextIndex 
                                    let id = res.data.id
                                    const content = this.fileList[index].content.replace(/^data:(.*?);base64,/, '');
                                    this.img(index, id, content)
                                }else if(res.data.finished === 'yes') {
                                   //上传成功！
                                    toast1.message = `上传中(100%)`
                                    //toast1.clear()
                                    setTimeout(()=>{
                                        this.$toast.success('中了！');
                                    }, 300)
                                    setTimeout(()=>{
                                        window.history.go(-1)
                                    }, 1500)
                                    

                                }
                                


                                
                            }
                        })
                    }
                },
                img(index, id, content){
                    let userInfo = localStorage.getItem('XGB-user')
                    let userid = JSON.parse(userInfo).id
                    let url = `https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getArticleList1.0/uploadArticle56A7eg618EG4186Eg186`
                    let data = { 
                        userid: userid,
                        type: 'img',
                        index: index,
                        id: id,
                        n: this.fileList.length, 
                        content: content,  
                    }; 
                    fetch(url, {
                        method: 'POST', // 指定请求方法为POST  
                        headers: {  
                            'Content-Type': 'application/json', // 设置请求头Content-Type为application/json  
                        },  
                        body: JSON.stringify(data), // 将数据转换为JSON格式并作为请求体发送  
                    })
                    .then(res=>res.json())
                    .then(res=>{
                        if (res.code === 0) {
                            if (res.data.finished === 'no') {
                                let rate = Number(100*(res.data.nextIndex+1)/(this.fileList.length+1)) + Number((Math.random()*10).toFixed(2)) 
                                toast1.message = `上传中(${rate.toFixed(2)}%)`
                                let index = res.data.nextIndex 
                                let id = res.data.id 
                                const content = this.fileList[index].content.replace(/^data:(.*?);base64,/, '');
                                this.img(index, id, content)
                            }else if(res.data.finished === 'yes') {
                                //上传成功！
                                toast1.message = `上传中(100%)`
                                //toast1.clear()
                                setTimeout(()=>{
                                    this.$toast.success('中了！');
                                }, 300)
                                setTimeout(()=>{
                                    window.history.go(-1)
                                }, 1500)

                            } 
                        }
                    })
                },
                addImg(){
                    this.addPic = !this.addPic
                    this.fileList = []
                },
                getPosition(){
                    let loadPosition = this.$toast.loading({
                        message: '定位中...',
                        duration: 10000,
                        forbidClick: true
                      });
                    let _this = this
                    var map = new BMapGL.Map("allmap");
                        var point = new BMapGL.Point(116.331398,39.897445);
                        map.centerAndZoom(point,12);
                        var geolocation = new BMapGL.Geolocation();
                        geolocation.getCurrentPosition(function(r){
                            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                                var mk = new BMapGL.Marker(r.point);
                                map.addOverlay(mk);
                                map.panTo(r.point);

                                // 创建地理编码实例      
                                var myGeo = new BMapGL.Geocoder();      
                                // 根据坐标得到地址描述    
                                myGeo.getLocation(new BMapGL.Point(r.point.lng, r.point.lat), function(result){      
                                    if (result){      
                                        loadPosition.clear()
                                        _this.address = result.address
                                        console.log(result)
                                        _this.otherResult = result.surroundingPois   
                                    }      
                                });
                
                
                            }     
                        }); 
                },  
                closePosition(event){
                    this.address = ""
                },
                changePosition(item){
                    this.address = item
                    document.querySelector(".otherResult").style.display='none'
                },
                getTopic(){
                    let loadTopic = this.$toast.loading({
                        message: '加载中...',
                        duration: 10000,
                        forbidClick: true
                      });
                    //获取topic
                    let url = `https://fc-mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.next.bspapp.com/getArticleList1.0`
                    let method = `getTopic_A68S45a4s5A1D`
                    let userInfo = localStorage.getItem('XGB-user')
                    let userid = JSON.parse(userInfo).id
                    let data = {
                        userid: userid
                    }
                    axios.post(`${url}/${method}`, data)
                    .then(res=>{
                        loadTopic.clear()
                        console.log(res.data)
                        this.totalTopicList = []
                        res.data.data.data.forEach((item, index)=>{
                            this.totalTopicList.push({
                                tId: item.tId,
                                tName: item.tName
                            })
                        })
                        
                    })
                },
                selectTopic(tId){
                    var ele = document.querySelector(`li[tId='${tId}']`)
                    
                    if(ele.getAttribute('choose')){ //取消选择
                        ele.style.color='#707070'
                        ele.style.border='.0338rem solid #707070'
                        ele.style.background='none'
                        ele.removeAttribute('choose')
                        this.topicList = this.topicList.filter(item=>item.tId !== tId)
                    }else{  //选择
                        if(this.topicList.length < 20){
                            ele.style.color='#138400'
                            ele.style.border='.0340rem solid #138400'
                            ele.setAttribute('choose', true)
                            this.topicList.push({
                                tId: tId,
                                tName: ele.innerText
                            })
                        }else{
                            this.$toast({
                                message: '最多可添加20条话题',
                                forbidClick: true
                            });
                        }
                        
                    }
                    //document.querySelector(`li[tId='${tId}']`).setAttribute('choose', true)
                },
                closeTopic(){
                    this.topicList = [],
                    this.totalTopicList = []
                }
            },
            computed: {
                text() {
                    return this.currentRate.toFixed(0) + '%'
                  }
            }
        })
    </script>
    <script>
        function resetHtmlFont(){
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        resetHtmlFont();
        window.onresize = resetHtmlFont;
    </script>
</body>

</html>